<template>
  <a-modal
    :title="title"
    :width="1100"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
	:maskClosable="false"
    :destroyOnClose="true"
    :footer="null">
    <a-spin :spinning="confirmLoading">
      <a-button  @click="showChange(true)"  ghost  type="primary">全部展示</a-button>
       <a-button  @click="showChange(false)" style="margin-left: 4px"   ghost type="primary">分页展示</a-button>
      <a-button style="margin-left: 10px" v-print="'#allTab'"  ghost type="primary">全部打印</a-button>
      <a-button v-print="'#id' + tabIndex" :key="tabIndex"  style="margin-left: 4px" ghost type="primary">单个打印</a-button>
      <a-checkbox style="margin-left: 10%" defaultChecked="true" @change="clickAllTable">
        是否打印审批历史
      </a-checkbox>
    <div  v-show="flag==true">
      <div id="allTab">
        <div  v-for="(item,index) in htmlList">
          <div v-html="item.html" class="PageNext"  >
          </div>
          <div v-if="item.sonHtml" style="margin-top: 20px" v-html="item.sonHtml" class="PageNext"  >
          </div>
          <div class="PageNext" style="margin-top: 20px" v-show="allTable" >
            <a-table
              size="middle"
              bordered
              @row
              :columns="columns"
              :dataSource="allDataSource[index]"
              :pagination="false"
              :loading="loading">
            </a-table>
          </div>
        </div>
      </div>
    </div>

    <a-tabs  default-active-key="1" @change="tabChange" v-show="flag==false">
      <a-tab-pane :key="index" :tab="item.num" v-for="(item,index) in htmlList">

        <!--<a-row type="flex" align="middle">-->
          <!--<a-col :span="2">-->
            <!--<a-button  v-print="'#id'+index" ghost type="primary">打印</a-button>-->
          <!--</a-col>-->
          <!--<a-col :span="4">-->
            <!--是否打印审批流程：<a-switch default-checked @change="value =>switchChange(value,index)" />-->
          <!--</a-col>-->
        <!--</a-row>-->
        <!--<div style="margin-left: 10px"></div>-->
          <div :ref="'id'+index" :id="'id'+index">
          <div v-html="item.html"  class="PageNext"  ></div>
          <div v-if="item.sonHtml" v-html="item.sonHtml" style="margin-top: 20px"  class="PageNext"></div>
          <div class="PageNext" style="margin-top: 20px"  v-show="allTable">
          <a-table
            ref="table"
            size="middle"
            bordered
            @row
            :columns="columns"
            :dataSource="dataSource"
            :pagination="false"
            :loading="loading">
          </a-table>
        </div>
        </div>
      </a-tab-pane>

    </a-tabs>
    </a-spin>
  </a-modal>
</template>

<script>
  import { httpAction,getAction,postAction } from '@/api/manage'
  export default {
    name: 'PrintTableViewModal',
    data(){
      return{
        title:"打印审批单",
        visible: false,
        confirmLoading: false,
        allTable:true,
        singleTable:[],
        flag:false,
        dataSource:null,
        allDataSource:[],
        loading:false,
        businessKey:[],
        htmlList:[],
        tabIndex:'0',
        columns: [
          {
            title: '序号',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title: '任务名称',
            align:"center",
            dataIndex: 'name'
          },
          {
            title: '处理人',
            align:"center",
            dataIndex: 'assigneeName'
          },
          {
            title: '耗时',
            align:"center",
            dataIndex: 'duration',
            customRender:function (t,r,index) {
              const duration = r.duration
              var text = ''
              if (duration != null) {
                // text = (duration / 1000 / 60).toFixed(2)
                // return text;
                var text = "";
                var days = Math.floor(duration / (24 * 60 * 60 * 1000));
                if(days != 0){
                  text += days + "天";
                }
                //计算小时数
                var hourLevel = duration % (24 * 60 * 60 * 1000);
                var hours = Math.floor(hourLevel / (60 * 60 * 1000))
                if(hours != 0){
                  text += hours + "小时";
                }
                //计算分钟数
                var minutesLevel = hourLevel % (60 * 60 * 1000);
                var minutes = Math.floor(minutesLevel / (60 * 1000));
                if(minutes != 0){
                  text += minutes + "分";
                }
                //计算秒数
                var seconds = Math.round((minutesLevel % (60 * 1000)) / 1000);
                text += seconds + "秒";

                return text;
              }
              return text;
            }
          },
          {
            title: '开始时间',
            align:"center",
            dataIndex: 'startTime'
          },
          {
            title: '结束时间',
            align:"center",
            dataIndex: 'endTime'
          },
          {
            title: '审批结果',
            align:"center",
            width:200,
            dataIndex: 'comment'
          }
        ],
        url: {
          getDetailByExpendType: '/base/printConfiguration/getDetailByExpendType',
          getPlanPrintByExpendType: '/base/printConfiguration/getPlanPrintByExpendType',
        }
      }
    },
    methods: {
      switchChange(checked,index) {
        console.log(`a-switch to ${checked}`);
        console.log(`a-switch to ${index} `);
        this.$set(this.singleTable,index,checked)
      },
      clickAllTable(e)
      {
        console.log('checkBox',e.target.checked)
          this.allTable=e.target.checked
          this.allTable=e.target.checked
      },
      showChange(value)
      {
        this.flag=value
      },
      initTable(record,printType,reimbState){
        this.confirmLoading=true;
        postAction(this.url.getDetailByExpendType+"?printType="+printType+"&reimbState="+reimbState,
          record).then(res => {
          if(res.success){
            if(res.result.length <= 0){
              this.$message.warn('未查询到此支出事项的打印模板！')
              return false
            }else{
              if (res.message=='成功')
              {
              }
              else {
                this.$message.warn(res.message)
              }
              this.htmlList= res.result
              this.singleTable.length=res.result.length
              this.loadList(0)
              this.allLoadList()
              console.log('查询结果',res.result)
            }
          }else{
            this.close()
            this.$message.warn(res.message)
            return false
          }
          this.confirmLoading=false;
        })
      },
      initPlanTable(record,printType,reimbState){
        this.confirmLoading=true;
        console.log(JSON.stringify(record))
        postAction(this.url.getPlanPrintByExpendType+"?printType="+printType+"&reimbState="+reimbState,
            record).then(res => {
          if(res.success){
            if(res.result.length <= 0){
              this.$message.warn('未查询到此支出事项的打印模板！')
              return false
            }else{
              if (res.message=='成功')
              {
              }
              else {
                this.$message.warn(res.message)
              }
              this.htmlList= res.result
              this.singleTable.length=res.result.length
              this.loadList(0)
              this.allLoadList()
             console.log('查询结果',res.result)
            }
          }else{
            this.close()
            this.$message.warn(res.message)
            return false
          }
          this.confirmLoading=false;
        })
      },
      allLoadList(){
        this.loading = true;
        getAction("/base/printConfiguration/getAllTable/?ids="+this.businessKey.toString(), {}).then((res) => {
          if (res.success) {
            this.allDataSource = res.result;
            //this.ipagination.total = res.result.total;
          }
          if(res.code===510){
            this.$message.warning(res.message)
          }
          this.loading = false;
        })
      },
      loadList(key) {
        //var params = this.getQueryParams();//查询条件
        this.loading = true;
        getAction("/act/taskinst/history/task/"+this.businessKey[key], {}).then((res) => {
          if (res.success) {
            this.dataSource = res.result;
            //this.ipagination.total = res.result.total;
          }
          if(res.code===510){
            this.$message.warning(res.message)
          }
          this.loading = false;
        })
      },
      tabChange(key){
        this.tabIndex=key.toString()
        console.log('tabIndex', this.tabIndex)
       this.loadList(key);
      },
      handleOk(){

      },
      handleCancel(){
        this.close()
      },
      close(){
          this.htmlList=[],
          this.dataSource=null,
          this.allDataSource=[],
            this.visible = false
      }
    }



  }
</script>
<!--media=print 这个属性可以在打印时有效-->
<style media=print scoped>
  .Noprint{display:none;}
  .PageNext{page-break-after: always;}
  /*去除页眉页脚*/
  /*@page{*/
  /*  size:  auto;   !* auto is the initial value *!*/
  /*  margin: 3mm;  !* this affects the margin in the printer settings *!*/
  /*}*/

  html{
       background-color: #FFFFFF;
       margin: 0;  /* this affects the margin on the html before sending to printer */
     }

  body{
    margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
  }
  /*去除页眉页脚*/
</style>
<style scoped>
  .ant-modal-body{
    overflow-y: scroll !important;
    top: 55px;
    bottom: 500px;
    height: 900px;
    width: 100%;
  }
</style>
